<% id = SecureRandom.uuid %>
<table id='<%= id %>' class="client_data_table" style="width:100%;">
  <tr>
    <th><%= t("client.product_name") %></th>
    <th><%= t("client.price") %></th>
    <th><%= t("client.quantity") %></th>
    <th><%= t("client.total") %></th>
    <% if order.step == Order::STEP_CARTING %>
      <th></th>
    <% end %>
  </tr>
  <% order.items.each do |i| %>
  <tr id="<%= i.id.to_s %>">
    <td><%= i.name %></td>
    <td>
      <%= number_to_currency i.price, unit: "", precision: 0 %>
      /
      <%= Product.get_unit_text i.unit %>
    </td>
    <td><%= i.quantity %></td>
    <td class="total">
      <%= render partial: 'currency', locals: { val: i.total, cssClass: 'cost' } %>
    </td>
    
    <% if order.step == Order::STEP_CARTING %>
    <td><%= image_tag "remove-from-cart.png", class: "removeFromCartButton", title: t("client.remove_from_cart"), data: i.id.to_s  %></td>
    <% end %>
  </tr>
  <% end %>
  <tr>
    <td colspan="3"><%= t "client.ship_cost" %></td>
    <td colspan="2" class="total sum" align="center">
      <%= render partial: 'currency', locals: { val: order.ship_cost, cssClass: 'cost shipCost' } %>
    </td>
  </tr>
  <tr>
    <td colspan="3" class="sumText"><%= t("client.sum") %></td>
    <td colspan="2" class="total sum" align="center">
      <%= render partial: 'currency', locals: { val: order.sum, cssClass: 'orderSum' } %>
    </td>
  </tr>
</table>

<script type="text/javascript">
  function changeOrderShipCost(shipCost) {
    changeCurrencyVal($('#<%= id %> .shipCost'), shipCost);
  }

  function updateOrderSum() {
    var sum = 0;
    $('#<%= id %> .cost').each(function(index, element) {
      sum += getCurrencyVal($(element));
    });
    changeCurrencyVal($('#<%= id %> .orderSum'), sum);
  }
</script>